<template>
	<view class="list-container" style="position: fixed;bottom: 20px;right: 20px;" :class="active ? 'active' : ''">
		<button class="more-button" aria-label="Menu Button" @click="active = !active">
			<view class="menu-icon-wrapper">
				<view class="menu-icon-line half first"></view>
				<view class="menu-icon-line"></view>
				<view class="menu-icon-line half last"></view>
			</view>
		</button>
		<ul class="more-button-list">
			<li class="more-button-list-item" @click="clickBox(1)">
				<svg
					xmlns="http://www.w3.org/2000/svg"
					width="20"
					height="20"
					viewbox="0 0 24 24"
					fill="none"
					stroke="currentColor"
					stroke-width="2"
					stroke-linecap="round"
					stroke-linejoin="round"
					class="feather feather-settings"
				>
					<circle cx="12" cy="12" r="3"></circle>
					<path
						d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z"
					></path>
				</svg>
				<span>{{'cardid' in vuex_cardInfo?'退出登录':'登录'}}</span>
			</li>
			<li class="more-button-list-item" @click="clickBox(2)">
				<svg
					xmlns="http://www.w3.org/2000/svg"
					width="20"
					height="20"
					viewbox="0 0 24 24"
					fill="none"
					stroke="currentColor"
					stroke-width="2"
					stroke-linecap="round"
					stroke-linejoin="round"
					class="feather feather-copy"
				>
					<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
					<path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"></path>
				</svg>
				<span>挂号</span>
			</li>
			<li class="more-button-list-item" @click="clickBox(3)">
				<svg
					xmlns="http://www.w3.org/2000/svg"
					width="20"
					height="20"
					viewbox="0 0 24 24"
					fill="none"
					stroke="currentColor"
					stroke-width="2"
					stroke-linecap="round"
					stroke-linejoin="round"
					class="feather feather-share"
				>
					<path d="M4 12v8a2 2 0 002 2h12a2 2 0 002-2v-8M16 6l-4-4-4 4M12 2v13"></path>
				</svg>
				<span>刷新</span>
			</li>
			<li class="more-button-list-item" @click="clickBox(4)">
				<svg
					xmlns="http://www.w3.org/2000/svg"
					width="20"
					height="20"
					viewbox="0 0 24 24"
					fill="none"
					stroke="currentColor"
					stroke-width="2"
					stroke-linecap="round"
					stroke-linejoin="round"
					class="feather feather-trash-2"
				>
					<path d="M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2M10 11v6M14 11v6"></path>
				</svg>
				<span>销卡</span>
			</li>
		</ul>
	</view>
</template>

<script>
export default {
	data() {
		return {
			active: false
		};
	},
	methods: {
		clickBox(index) {
			this.$emit('myBoxFunction', index);
			this.active = false;
		}
	}
};
</script>

<style>
/* @import url("./static/css/css2.css"); */
@import url('./static/css/normalize.min');
@import url('./static/css/style.css');
</style>
<style lang="scss"></style>
